/*-------tag style-------*/
body * {
	display: flex;
}
body {
	margin: 0;

	overflow: hidden;

	color: #E0E2E4;

	cursor: default;

	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;

	font-family: "Microsoft YaHei";
}

input, span {
	outline: none;
}
input {
	border: 1px solid transparent;

	background-color: #34495e;
	color: #E0E2E4;

	font-size: 16px;
}
input:focus {
	border-bottom: 1px solid #E0E2E4;
}

select {
	width: 50%;
	background-color: #34495e;
	color: #E0E2E4;
	border-radius: 2px;
	border: 2px solid transparent;
	border-left: 2px solid #E0E2E4;
}

a {
	text-decoration: none;
	color: #E0E2E4
}
a:visited {
	color: #E0E2E4;
}

/*-------app-------*/
#app {
	height: 100%;
	width: 100%;

	background-color: green;
}

#mainBox {
	height: 100%;
	width: 100%;

	flex: 1
}
#naviBox {
	height: 100%;
	width: 450px;

	overflow: hidden;
	overflow-y: auto;
}

/*-------recoBox-------*/
.recoBox {
	width: 100%;
	height: 95%;
}
.recoBox>.reco {
	border: 2px solid #557799;
	border-radius: 4px;

	width: 19%;
	height: 24%;

	font-size: 14px;
}
.recoBox>.reco:hover {
	border: 2px solid #E0E2E4;
}
.recoBox>.reco.ding {
	border: 2px solid red;
}
.recoBox>.reco.down {
	border: 2px solid yellow;
}
.recoBox>.reco>.detail {
	border: 2px solid transparent;

	width: 100%;
	height: 14%;
}
.recoBox>.reco>.detail.thumb {
	height: 70%;
}
.recoBox>.reco>.detail.thumb>img {
	object-fit: cover;

	height: 100%;
	max-width: 95%;
}
.recoBox>.reco>.detail>.icon {
	width: 14%;
}
.recoBox>.reco>.detail>.text {
	width: 72%;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*-------pageBox-------*/
.pageBox {
	width: 100%;
	height: 5%;
}
.pageBox>.prev, .pageBox>.next {
	width: 33%;

	cursor: pointer;
}
.pageBox>.count {
	width: 33%;
}
.pageBox>.count>* {
	padding-top: 1px;
}
.pageBox>.count>input {
	width: 40px;
	padding-top: 3px;

	text-align: center;

	color: #E0E2E4;
	background-color: #293134;

	cursor: auto;
}

/*-------tabBox-------*/
.tabBox {
	width: 100%;
	height: 100%;
}

/*-------tabBox.dash-------*/
.tabBox.Dash>.headBox {
	width: 100%;
	height: 45px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);

	background-color: #34495e;
}
.tabBox.Dash>.headBox>.head {
	width: 100%;

	border: 2px solid #34495e;

	margin: 0;
	margin-right: 2px;

	color: #E0E2E4;

	cursor: pointer;
}
.tabBox.Dash>.headBox>.head:hover {
	border-bottom: 2px solid #148474;
}
.tabBox.Dash>.headBox>.head.active {
	border-radius: 4px;
	border: 2px solid #148474;
	background-color: #148474;
}
.tabBox.Dash>.headBox>.item {
	height: 93%;
	width: 100%;
}
.tabBox.Dash>.item {
	height: 100%;
	width: 100%;

	flex: 1;
}

/*-------wordBox-------*/
.wordBox>.word {
	margin: 3px;

	min-width: 30px;
	height: 33px;

	border: 2px solid #557799;
	background-color: #E0E2E4;

	padding: 4px;
	padding-left: 3px;
	padding-right: 3px;

	border-radius: 4px;

	text-align: center;
	color: #557799;
	font-size: 17px;

	cursor: auto;
}
.wordBox>.word:focus {
	border-bottom: 2px solid #557799;
}

/*-------Component-------*/
.NaviColumnSpace {
	width: 90%;
	height: 24px;
	min-height: 24px;
}
.NaviColumn {
	width: 90%;
	height: auto;
	min-height: 45px;
}
.NaviColumn2x {
	width: 90%;
	height: auto;
	min-height: 90px;
}
.NaviColumn3x {
	width: 90%;
	height: auto;
	min-height: 135px;
}
.ButtonClick {
	margin: 3px;
	min-width: 30px;

	border: 2px solid #557799;

	padding: 4px;
	padding-left: 3px;
	padding-right: 3px;

	border-radius: 4px;

	text-align: center;

	color: #E0E2E4;
	background-color: #557799;

	cursor: pointer;
}
.tagBox>.tags>.tag {
	border: 2px solid;
	border-radius: 2px;

	padding: 4px;
	margin: 2px;
}

/*-------logBox-------*/
.logBox {
	width: 100%;
	height: 100%;

	overflow-x: hidden;
	overflow-y: hidden;
}
.logBox>.logs {
	display: block;

	width: 97%;
	height: 100%;

	margin-left: 3%;
	overflow-x: hidden;
	overflow-y: scroll;
}

.leftHeadButton {
	border: 3px solid transparent;
}